<!--
 * @Author:shawnXiao
 * @Date: 2021-12-23 15:17:10
 * @LastEditTime: 2021-12-26 16:42:41
 * @FilePath: /vite2-vue3-typescript/src/components/SchemeFormReader/components/FormFieldRender.vue
-->
<script setup lang="ts">
import { watch, reactive, onMounted, withDefaults } from 'vue'
import { configsProps, configType } from '../index.vue'

interface Emit {
  (e: 'onSearchInput', data: any): void
}

interface Props {
  data: configsProps
  columns: configType[]
}

const props = withDefaults(defineProps<Props>(), {
  //  默认值
  data: () => ({
    title: '',
    type: 'basic',
    important: false,
    noCollapse: false,
    noAction: false,
    gutter: [20, 20],
    loadings: {
      btnLoading: false,
    },
    formState: {},
    layout: 'horizontal',
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
    styleCollapse: '', // Collapse自定义样式
    btnTxt: '确定', // 按钮文案
    btnSize: 'small',
    btnRestTxt: '重置',
    btnRestShow: false, // 重置按钮显示
    size: 'small',
    list: [],
  }),
  columns: () => [],
})
const emit = defineEmits<Emit>()
const onSearchInput = () => {
  emit('onSearchInput', props.data.formState)
}
const rules: any = reactive({})

/*监听props*/
watch(props, (newProps) => {
  setRules(newProps.columns)
})

onMounted(() => {
  setRules(props.columns)
})

const setRules = (columns: any[]) => {
  const list: any[] = columns || []
  list.length &&
    list.forEach((item: any) => {
      rules[item['key']] = item.rules
    })
}
const onReset = () => {}
</script>

<template>
  <div class="formCom-box-c" :class="data?.layout === 'inline' ? 'formCom-box-c-inline' : ''">
    <a-form
      :model="data.formState"
      :layout="data?.layout"
      :label-col="data?.labelCol"
      :wrapper-col="data?.wrapperCol"
      :onFinish="onSearchInput"
      ref="schemeFormRef"
      :rules="rules"
      :size="data?.size"
    >
      <a-row :gutter="data?.gutter">
        <template v-for="item in columns" :key="item?.key || item?.id">
          <a-col :span="item?.colSpan">
            <template v-if="item.type === 'input'">
              <a-form-item
                :label="item?.title || item?.label"
                :labelCol="item?.labelCol"
                :name="item.key"
              >
                <a-input
                  v-model:value="data.formState[item.key]"
                  :size="data?.size"
                  :disabled="item?.disabled"
                />
              </a-form-item>
            </template>
            <template v-if="item.type === 'date'">
              <a-form-item
                :label="item?.title || item?.label"
                :labelCol="item?.labelCol"
                :name="item.key"
              >
                <a-date-picker
                  v-model:value="data.formState[item.key]"
                  :showTime="item?.showTime"
                  type="date"
                  placeholder="请选择"
                  style="width: 100%"
                  :size="data?.size"
                  :disabled="item?.disabled"
                />
              </a-form-item>
            </template>
            <template v-if="item.type === 'checkbox'">
              <a-form-item
                :label="item?.title || item?.label"
                :labelCol="item?.labelCol"
                :name="item.key"
              >
                <a-checkbox
                  v-model:checked="data.formState[item.key]"
                  :size="data?.size"
                  :disabled="item?.disabled"
                ></a-checkbox>
              </a-form-item>
            </template>
            <template v-if="item.type === 'switch'">
              <a-form-item
                :label="item?.title || item?.label"
                :labelCol="item?.labelCol"
                :name="item.key"
              >
                <a-switch
                  v-model:checked="data.formState[item.key]"
                  :checkedChildren="item.checkedChildren || '开'"
                  :unCheckedChildren="item.unCheckedChildren || '关'"
                  :size="data?.size"
                  :disabled="item?.disabled"
                />
              </a-form-item>
            </template>
            <template v-if="item.type === 'inputNumber'">
              <a-form-item
                :label="item?.title || item?.label"
                :labelCol="item?.labelCol"
                :name="item.key"
              >
                <a-input-number
                  v-model:value="data.formState[item.key]"
                  :min="item?.min"
                  :max="item?.max"
                  :size="data?.size"
                  :disabled="item?.disabled"
                />
              </a-form-item>
            </template>
            <template v-if="item.type === 'inputSearch'">
              <a-form-item
                :label="item?.title || item?.label"
                :labelCol="item?.labelCol"
                :name="item.key"
              >
                <a-input-search
                  v-model:value="data.formState[item.key]"
                  :placeholder="item?.placeholder"
                  @search="onSearchInput"
                  :size="data?.size"
                  :disabled="item?.disabled"
                />
              </a-form-item>
            </template>
            <template v-if="item.type === 'radio'">
              <a-form-item
                :label="item?.title || item?.label"
                :labelCol="item?.labelCol"
                :name="item.key"
              >
                <a-radio
                  v-model:checked="data.formState[item.key]"
                  :size="data?.size"
                  :disabled="item?.disabled"
                ></a-radio>
              </a-form-item>
            </template>
            <template v-if="item.type === 'password'">
              <a-form-item
                :label="item?.title || item?.label"
                :labelCol="item?.labelCol"
                :name="item.key"
              >
                <a-input-password
                  v-model:value="data.formState[item.key]"
                  :placeholder="item?.placeholder"
                  :size="data?.size"
                  :disabled="item?.disabled"
                />
              </a-form-item>
            </template>
            <template v-if="item.type === 'textarea'">
              <a-form-item
                :label="item?.title || item?.label"
                :labelCol="item?.labelCol"
                :name="item.key"
              >
                <a-textarea
                  v-model:value="data.formState[item.key]"
                  :placeholder="item?.placeholder"
                  :rows="item?.rows ? item.rows : 4"
                  :size="data?.size"
                  :disabled="item?.disabled"
                />
              </a-form-item>
            </template>
          </a-col>
        </template>
      </a-row>
      <a-row>
        <a-form-item v-if="!data?.noAction && columns?.length">
          <a-space :size="20" :class="data?.layout === 'inline' ? 'space-inline' : ''">
            <a-button
              type="primary"
              :loading="data?.loadings?.btnLoading"
              htmlType="submit"
              :size="data?.btnSize"
              >{{ data?.btnTxt || '搜索' }}</a-button
            >
            <a-button
              v-if="data?.btnRestShow"
              htmlType="button"
              @click="onReset"
              :size="data?.btnSize"
              >{{ data?.btnRestTxt || '重置' }}</a-button
            >
          </a-space>
        </a-form-item>
      </a-row>
    </a-form>
  </div>
</template>

<style lang="less" scoped>
.formCom-box-c {
  &-inline {
    .ant-form-inline {
      .row-box {
        flex: 1;
      }
      .space-inline {
        margin-left: 20px;
      }
    }
  }
  .ant-row {
    .ant-col {
      .ant-form-item {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
